<template>
  <div :class="isclass +' '+size" @click="onSave">{{name}}</div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: "按钮"
    },
    isclass: {
      type: String,
      default: "my-button"
    },
    size: {
      type: String,
      default: ""
    }
  },
  methods:{
    onSave(){
      this.$emit("onSave")
    }
  },
};
</script>

<style lang="scss" scoped>
.my-button {
  width: 100%;
  height: 0.8rem;
  font-size: 0.32rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  background: linear-gradient(212deg,#22a0fe -29%, #145afe);
  border-radius: 0.45rem;
  text-align: center;
  color: #fff;
  margin-top: 0.5rem;
  &.medium {
    height: 0.8rem;
    border-radius: 0.4rem;
    font-size: 0.32rem;
  }
  &.small {
    height: 0.6rem;
    border-radius: 0.3rem;
    font-size: 0.26rem;
  }
  &.mini {
    height: 0.8rem;
    border-radius: 0.4rem;
    font-size: 0.32rem;
  }
}
</style>